<template>
  <div class="service-container">
    <img class="bgimg" src="../assets/img/banner.png"/>
    <div class="container">
      <div class="cooper">
        <div class="cooper-item">
          <div class="nav">
            <a href="#/information/page/1">智能资讯 -</a><span class="title">{{info.title}}</span>
            <p class="date">{{info.date}}</p>
          </div>  
          <div class="cooper-item" style="padding: 20px 80px;margin-bottom: 50px;">
            <h1 class="step1">{{info.title}}</h1>
            <hr class="step2" color="#1889B2" width="30" />
            <div class="content">
            </div>
          </div>
        </div>
      </div>
    <bottom></bottom>
    </div>
  </div>
</template>

<script>
import Bottom from './Bottom'
export default {
  name: 'InfoDetail',
  data () {
    return {
      id:this.$route.params.id,
      infoList:DataManager.Information,
      info:""
    }
  },components:{
    Bottom
  },created(){
  },mounted(){
    var self = this;
    var id = self.id*1-1;
    self.info = self.infoList[id]
    $(".content").html(self.info.html)    
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1{
    font-weight: 400;
    font-size: 16px;
  }
a,span,.date{
  text-decoration: none;
  color: #A8A8A8;
  font-size: 12px;
}
.content{
  margin:0 30px 0;
  text-align:left;
}
  .bgimg{width: 100%;min-width: 1000px;}
.content img,.content p{max-width: 100%;}
.service-container{
  background: #EDEDED;
  width: 100%;
  position: relative;
  padding-bottom: 40px;
}
a{position: absolute;left: 100px;}
.title{
  height: 20px;
  position: absolute;
  display: inline-block;
  overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
  left: 160px;
  right: 175px;
}
.cooper{min-width: 800px; width: 70%;margin: auto;background: white;position: relative;top: -30px;}
.cooper-item{padding:0;}
.nav{
  position: relative;
  overflow: hidden;
  padding: 10px 15%;
  box-sizing: border-box;
  text-align: left;
  background: #EDEDED;
}
.date{
  margin: 0;
  float: right;
}
</style>
